<template>
  <div class="organizer-profile-edit">
    <!-- 导航栏 -->
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="goBack"
      title="修改组织资料"
    />

    <!-- 表单 -->
    <van-form @submit="handleSubmit" ref="form">
      <!-- 组织名称 -->
      <van-field
        v-model="organizer.name"
        label="组织名称"
        placeholder="请输入组织名称"
        clearable
      />

      <!-- 图片上传 -->
      <van-field name="uploader" label="组织头像">
        <template #input>
          <van-uploader
            v-model="fileList"
            :after-read="onImageChange"
            :max-count="1"
          >
            <template #preview="image">
              <van-image
                :src="image.file.url"
                @click="showPreview(image.file)"
              />
              <van-icon name="cross" @click="onDeleteImage(image.file)" />
            </template>
          </van-uploader>
        </template>
      </van-field>

      <!-- 联系人姓名 -->
      <van-field
        v-model="organizer.contactName"
        label="联系人姓名"
        placeholder="请输入联系人姓名"
        clearable
      />

      <!-- 联系人邮箱 -->
      <van-field
        v-model="organizer.contactEmail"
        label="联系人邮箱"
        placeholder="请输入联系人邮箱"
        clearable
      />

      <!-- 联系人电话 -->
      <van-field
        v-model="organizer.contactPhone"
        label="联系人电话"
        placeholder="请输入联系人电话"
        type="tel"
        clearable
      />

      <!-- 组织描述 -->
      <van-field
        v-model="organizer.description"
        label="组织描述"
        placeholder="请输入组织描述"
        type="textarea"
        rows="4"
        required
        clearable
      />

      <!-- 保存按钮 -->
      <van-button type="primary" native-type="submit" block>保存</van-button>
    </van-form>
  </div>
</template>
  
  <script>
import { Field, Button, Form, NavBar, Uploader } from "vant";
import organizerProfileApi from "@/api/organizerProfile.js";
import fileApi from "@/api/file.js";

export default {
  components: {
    "van-field": Field,
    "van-button": Button,
    "van-form": Form,
    "van-nav-bar": NavBar,
    "van-uploader": Uploader,
  },
  data() {
    return {
      organizer: {
        name: "",
        pic: "", // 存储头像的字段
        contactName: "",
        contactEmail: "",
        contactPhone: "",
        description: "",
      },
      fileList: [], // 用于存储上传的文件列表
    };
  },
  mounted() {
    // 获取原有资料
    this.getOrganizerProfile();
  },
  methods: {
    onDeleteImage(file, index, fileList) {
      const objectName = this.getObjectName(file);
      if (objectName) {
        fileApi.deleteImage(objectName).then(() => {
          this.fileList = [];
          this.organizer.pic = "";
        });
      } else {
        this.$toast.fail("无法获取图片名称，删除失败");
      }
    },
    getObjectName(file) {
      if (file && file.url) {
        const url = file.url;
        const bucketUrl =
          "https://volunteersystem.oss-cn-beijing.aliyuncs.com/"; // 替换为你的OSS bucket URL
        const objectName = url.replace(bucketUrl, "");
        return objectName;
      }
      return null;
    },
    getOrganizerProfile() {
      organizerProfileApi.getOrganizerProfile().then((res) => {
        this.organizer = res;
        if (this.organizer.pic) {
          this.fileList = [{ url: this.organizer.pic }];
        } else {
          this.fileList = [];
        }
      });
    },

    // 提交表单
    async handleSubmit() {
      try {
        console.log("提交的数据:", this.organizer);
        await organizerProfileApi.updateOrganizerProfile(this.organizer);
        this.$toast.success("资料已保存");
        this.getOrganizerProfile();
      } catch (err) {
        console.error(err);
        this.$toast.fail(err.message || "更改失败");
      }
    },

    // 处理图片上传
    onImageChange(fileObj) {
      const file = fileObj.file;
      if (file && file instanceof File) {
        fileApi
          .fileUpload(file)
          .then((res) => {
            console.log("图片上传成功，OSS返回地址：", res);
            this.fileList = [{ url: res }];
          })
          .catch((error) => {
            console.error("图片上传失败：", error);
          });
      } else {
        console.error("无效的文件");
      }
      return false;
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
  },
  watch: {
    fileList(newVal) {
      if (newVal.length > 0) {
        this.organizer.pic = newVal[0].url;
      } else {
        this.organizer.pic = "";
      }
    },
  },
};
</script>
  
 <style scoped>
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow{
  color: white !important;
}
/* 整体容器 */
.organizer-profile-edit {
  padding: 5vh 5%; /* 使用 vh 和 % 进行内边距设置，确保在不同设备上适配 */
  background-color: #f8f9fa; /* 提升背景对比度 */
  min-height: 100vh; /* 保证页面最小高度覆盖屏幕 */
  box-sizing: border-box;
}

/* 导航栏 */
.van-nav-bar {
  margin-bottom: 3vh;
  background-color: #007aff; /* 设置导航栏背景色 */
  color: white; /* 确保文字在深色背景上清晰 */
}

/* 输入框样式 */
.van-field {
  margin-bottom: 2vh;
  background-color: white; /* 突出输入框 */
  border-radius: 0.5vh;
  padding: 1.5vh; /* 内部增加额外的舒适间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影提升层次感 */
}

/* 输入框标签样式 */
.van-field__label {
  color: #007aff; /* 使用品牌色作为标签颜色 */
  font-weight: bold;
  font-size: 2.5vh; /* 标签字体大小 */
}

/* 输入框内容样式 */
.van-field__control {
  font-size: 2.5vh; /* 调整输入框字体大小 */
  color: #333; /* 字体颜色 */
}

/* 上传组件的样式 */
.van-uploader {
  margin-top: 1vh;
}

.van-uploader__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.van-uploader__preview-img {
  width: 100%;
  max-width: 15vh; /* 限制图片最大宽度 */
  border-radius: 0.5vh;
  margin-bottom: 1vh;
}

.van-uploader__preview-delete {
  margin-top: -2vh;
  background-color: #ff4d4f; /* 删除按钮为红色 */
  border-radius: 50%;
  width: 2.5vh;
  height: 2.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2vh;
}

/* 文本域样式 */
textarea {
  line-height: 1.6; /* 提高可读性 */
}

/* 保存按钮样式 */
.van-button {
  margin-top: 3vh;
  font-size: 2.5vh;
  background-color: #007aff;
  color: white;
  border-radius: 2vh; /* 按钮为圆角风格 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 媒体查询：手机端样式 */
@media (max-width: 767px) {
  .van-field__label,
  .van-field__control,
  .van-button {
    font-size: 3vh; /* 手机端字体更大 */
  }
  .van-uploader__preview-img {
    max-width: 20vh;
  }
}

/* 媒体查询：平板及桌面端样式 */
@media (min-width: 768px) {
  .van-field__label,
  .van-field__control,
  .van-button {
    font-size: 2vh; /* 桌面端字体稍微小些 */
  }
}
</style>

  